<template>
	<view>
		<text class="text">工号:{{info.mnum}}</text>
		<u-icon class="text icon" name="edit-pen" @click="show = true"></u-icon>

		<!-- 模态框 -->
		<u-modal v-model="show" :mask-close-able="true" @confirm="confirm">
			<view class="slot-content">
				<u-field v-model="text" label="工号:">
				</u-field>
			</view>
		</u-modal>

		<!-- 提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import * as api from "@/api/apiList/user/user.js"

	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapState,
		mapMutations
	} = createNamespacedHelpers('userModule');

	export default {
		props: {
			info: { //成员信息
				type: Object,
				required: true
			}
		},
		data() {
			return {
				show: false,
				text: this.info.mnum || ""
			}
		},
		watch:{
			info:{
				handler(val){
					this.text = val.mnum
				},
				immediate:true,
				deep:true
			}
		},
		computed: {
			...mapState(["member"])
		},
		methods: {
			...mapMutations(["GET_member"]),
			async API_update(data) { //更新用户信息接口
				let result = {
					data
				}
				return await api.update(result)
			},
			async confirm() { //确认按钮
				let data = Object.assign({}, this.info, {
					mnum: this.text//工号
				})
				let res = await this.API_update(data)
				if (res.data.code === 1000) {
					this.GET_member(data)
					this.$refs.uToast.show({
						title: res.data.msg,
						type: 'success',
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text {
		color: #fff;
	}

	.icon {
		margin-left: 10rpx;
	}
</style>
